<!--
 * @Author: wangming
 * @Date: 2022-02-07 14:00:54
 * @LastEditors: wangming
 * @LastEditTime: 2022-03-09 16:13:12
 * @FilePath: /hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/rightModel/components/hlEcharts/__components__/optionConfig.vue
 * @Description: 
-->
<template>
  <el-form-item label="图表配置">
    <el-button
      @click="editJsx"
      type="primary"
      icon="el-icon-edit"
      plain
      size="mini"
      >代码编辑</el-button
    >
  </el-form-item>
</template>

<script>
import monacoEditor from "../../hlTableList/monacoEditor/index.js";
import basicmixins from "../../basicmixins";
const template = `/**
 * 图表配置返回options的函数
 * @context 全局上下文
 * @myChart echart实例
 * @data 接口返回的数据
 * @returns 用于图表的渲染 返回值必须是符合echarts规范的options对象
 */
function returnOptions(context,myChart,data) {
    const options = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
        },
      ],
    };
    myChart.setOption(options)
}`;
export default {
  mixins: [basicmixins],
  data() {
    return {};
  },
  methods: {
    editJsx() {
      let jsx = this.value.__config.parseDataJsx || template;
      monacoEditor.showEdit(decodeURIComponent(jsx)).then((res) => {
        this.value.__config.parseDataJsx = encodeURIComponent(res);
      });
    },
  },
};
</script>

<style scoped lang="scss"></style>
